<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第一节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			
			
			
			<div id=""><div id="num"></div>
				<input type="button" name="zidan" id="zidan" value="补充子弹" />
			</div>
		</div>
	</body>

	<script>
		
		window.onload = function() {
			//let oCanvas = document.getElementById('canvas');
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			pen.fillStyle = "#99FF99";
			let da = 50;
			pen.fillRect(0,canvas.width/2-da/2,da,da);
			
			let xiao = 20;
			pen.fillStyle = "red";
			
			let timer1;
			let timer2;
			let m=50;
			let n=240;
			let bian=0;
			let count=5;
			let flag=1;
			let j=1;
			let step=20;
			
			num = document.getElementById("num");
			num.innerHTML=count;
			
			zidan = document.getElementById("zidan");
			zidan.onclick = function(){
					
					count+=5;	
					num.innerHTML="剩余子弹："+count;
			}
			count2=document.getElementById("zidan").innerHTML;
				console.log(count2)
			document.onkeydown = function(e){
				let timer2=setInterval(function(){
					
					if(e.keyCode == 32&&flag==1){
					//alert(count)
					
					if(count===0){
						alert("请先补充子弹")
						return
					}
					count--;
					num.innerHTML="剩余子弹："+count;
					
					flag=0;
					let timer = setInterval(function(){
					if(j!=0){
							//pen.fillRect(m+step*(j-1),n,xiao,xiao);
							pen.clearRect(m+step*(j-1),n,xiao,xiao);
					}
						
							pen.fillRect(m+step*j,n,xiao,xiao);
								
							j++;
						if((m+step*(j-1))>490){
//							
								//clearInterval(timer)
								flag=1;
								//da=50;
								//alert("hah")
								//pen.fillRect(50,240,20,20);
								j=0;
								
							}
							//alert("daa");
							
						
					
						
						},200)
					
					
					
					
				}
					
					
					if(count){
						clearInterval(timer2);
					}
					
				},200)
				
				
			}
			
			//定时器函数
			
			function time(){
				
				
				//if(flag=0){
					
				
					timer1 = setInterval(function(){
						
						
					
						
							
						//pen.fillRect(da,canvas.width/2-xiao/2,xiao,xiao);
						move();
						//if(bian<=100){	
						
						bian+=20;
					//}
						
				
					
						
						
						if(bian==430){
					//return
						clearInterval(timer1);
						
							//pen.fillRect(da,canvas.width/2-xiao/2,xiao,xiao);
						}
					},500)
					//clearInterval(timer1);
					
					
			}
			
			
			//移动函数
			function move(){
				m=da;n=canvas.width/2-xiao/2
				//pen.fillRect(m,n,xiao,xiao);
						pen.clearRect(m,n,xiao,xiao);
						pen.translate(20,0);
						pen.fillRect(m,n,xiao,xiao);
			}
			
			
			
			
			
		}
	</script>

</html>